'use client'

import { Button } from '@/components/ui/button'
import { cn } from "@/lib/utils"
import { ChevronLeft, X } from 'lucide-react'
import React, { useState } from 'react'
import ReactMarkdown from 'react-markdown'

interface EnterpriseLibraryProps {
  state: string
  onStateChange: (state: string) => void
}

const EnterpriseLibrary: React.FC<EnterpriseLibraryProps> = ({ state, onStateChange }) => {
  const [isExpanded, setIsExpanded] = useState(false)
  const [activeTab, setActiveTab] = useState('basic') // 'basic' | 'data' | 'sync'

  const renderContent = () => {
    switch (activeTab) {
      case 'basic':
        return (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">企业基本信息管理</h3>
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <label className="block text-sm font-medium">公司名称</label>
                <input type="text" className="w-full p-2 border rounded" />
              </div>
              <div className="space-y-2">
                <label className="block text-sm font-medium">Logo上传</label>
                <input type="file" className="w-full p-2 border rounded" accept="image/*" />
              </div>
              <div className="col-span-2 space-y-2">
                <label className="block text-sm font-medium">公司简介</label>
                <textarea className="w-full p-2 border rounded" rows={4}></textarea>
              </div>
            </div>
          </div>
        )
      case 'data':
        return (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">数据管理</h3>
            <div className="space-y-6">
              <section className="space-y-2">
                <h4 className="font-medium">ESG关键指标</h4>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <h5 className="text-sm font-medium mb-2">环境数据</h5>
                    <div className="space-y-2">
                      <input type="text" placeholder="能耗指标" className="w-full p-2 border rounded" />
                      <input type="text" placeholder="碳排放量" className="w-full p-2 border rounded" />
                    </div>
                  </div>
                  <div>
                    <h5 className="text-sm font-medium mb-2">社会责任数据</h5>
                    <div className="space-y-2">
                      <input type="text" placeholder="员工总数" className="w-full p-2 border rounded" />
                      <input type="text" placeholder="社区贡献" className="w-full p-2 border rounded" />
                    </div>
                  </div>
                </div>
              </section>
              
              <section className="space-y-2">
                <h4 className="font-medium">治理数据</h4>
                <div className="space-y-2">
                  <input type="text" placeholder="合规指标" className="w-full p-2 border rounded" />
                  <input type="text" placeholder="风控指标" className="w-full p-2 border rounded" />
                </div>
              </section>
            </div>
          </div>
        )
      case 'sync':
        return (
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">数据同步配置</h3>
            <div className="space-y-4">
              <div className="flex items-center justify-between p-4 bg-gray-50 rounded">
                <span>自动同步</span>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input type="checkbox" className="sr-only peer" />
                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                </label>
              </div>
              
              <div className="space-y-2">
                <label className="block text-sm font-medium">同步频率</label>
                <select className="w-full p-2 border rounded">
                  <option>每天</option>
                  <option>每周</option>
                  <option>每月</option>
                </select>
              </div>
              
              <div className="space-y-2">
                <label className="block text-sm font-medium">上次更新时间</label>
                <input type="text" className="w-full p-2 border rounded" disabled value="2024-03-20 10:30:00" />
              </div>
              
              <Button className="w-full">手动同步数据</Button>
            </div>
          </div>
        )
      default:
        return null
    }
  }

  return (
    <div
      className={cn(
        "fixed top-16 right-0 h-[calc(100vh-4rem)] bg-background border-l overflow-hidden",
        state === 'closed' 
          ? "w-0 transition-all duration-200 ease-in-out"
          : isExpanded 
            ? "w-[60vw] transition-all duration-300 ease-in-out"
            : "w-96 transition-all duration-300 ease-in-out"
      )}
    >
      <div className="flex items-center justify-between p-4 border-b">
        <div className="flex items-center gap-2">
          <Button 
            variant="ghost" 
            size="icon" 
            onClick={() => setIsExpanded(!isExpanded)}
          >
            <ChevronLeft className={cn("h-4 w-4 transition-transform", isExpanded && "rotate-180")} />
          </Button>
          <h2 className="text-lg font-semibold whitespace-nowrap">企业库</h2>
        </div>
        <Button variant="ghost" size="icon" onClick={() => onStateChange(state === 'closed' ? 'open' : 'closed')}>
          <X className="h-4 w-4" />
        </Button>
      </div>

      {isExpanded ? (
        <div className="flex h-[calc(100%-4rem)]">
          <div className="w-48 border-r bg-gray-50">
            <nav className="p-4 space-y-2">
              <button
                className={cn(
                  "w-full text-left px-4 py-2 rounded",
                  activeTab === 'basic' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100'
                )}
                onClick={() => setActiveTab('basic')}
              >
                基本信息
              </button>
              <button
                className={cn(
                  "w-full text-left px-4 py-2 rounded",
                  activeTab === 'data' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100'
                )}
                onClick={() => setActiveTab('data')}
              >
                数据管理
              </button>
              <button
                className={cn(
                  "w-full text-left px-4 py-2 rounded",
                  activeTab === 'sync' ? 'bg-blue-100 text-blue-700' : 'hover:bg-gray-100'
                )}
                onClick={() => setActiveTab('sync')}
              >
                数据同步
              </button>
            </nav>
          </div>
          <div className="flex-1 p-6 overflow-auto">
            {renderContent()}
          </div>
        </div>
      ) : (
        <div className={cn(
          "p-4 overflow-auto h-[calc(100%-4rem)] relative",
          state === 'closed' 
            ? "opacity-0 transition-opacity duration-100 ease-in-out"
            : "opacity-100 transition-opacity duration-200 delay-100 ease-in-out"
        )}>
          <ReactMarkdown>
            {`# 企业库内容

这里是企业库的Markdown内容。

## 公司概况

- 公司历史
- 组织结构
- 业务领域

## 企业文化

1. 企业使命
2. 企业愿景
3. 核心价值观

### 社会责任

- 环境保护计划
- 社区贡献项目
- 员工关怀计`}
          </ReactMarkdown>
        </div>
      )}
    </div>
  )
}

export default EnterpriseLibrary